<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/common.js"></script>
    <title>用户注册</title>

</head>
<body>
<jsp:include page="common/header.jsp"/>
<article>
    <!-- 网站主体 -->
    <div id="main">
        <section class="ct">
            <!-- 上传表单-->
            <div class="upload">
                <h1>用户注册②<em>填写基本信息、完成用户注册第二步</em></h1>
                <!-- 注册步骤导航-->
                <div class="reg_step">
                    <a class="step1">注册信息</a><a class="step">基本信息</a><a class="step2">注册完成</a>
                </div>

                <form action="${pageContext.request.contextPath}/user/next/reg" id="myform" method="post" autocomplete="off" enctype="multipart/form-data">

                    <b style="color: red">{{error}}</b>
<%--                    设置一个 隐藏域用来将 用户ID 传到服务器中--%>
                    <input type="hidden" name="userId" value="${u}"/>

                    <p class="file">
                            <input type="file" name="photo" @change="uploadPhoto" accept="image/*">
                            <span class="t1" v-show="!uploaded">点击上传用户头像、图片小于5MB</span>


                        <!-- 上传后的效果 -->

                             <span class="t2" v-show="uploaded">
                            <img :src="imgUrl"/>
                            <b v-text="filename">房产物业管理系统.zip</b>
                            <a>重新上传</a>
                             </span>

                    </p>

                    <p>
                        <label>出生日期：</label>
                        <input id="tel" class="upt" type="date" name="birth" value="${userInfo.birth}" />
                    </p>

                    <p>
                        <label>昵称：</label>
                        <input id="nickname" class="upt" type="text" name="nickname" value="${userInfo.nickName}" />
                        <b></b>
                    </p>

                    <p>
                        <label>真实姓名：</label>
                        <input id="realname" class="upt" type="text" name="realname" value="${userInfo.realName}" />
                        <b></b>
                    </p>

                    <p>
                        <label>性别：</label>
                        <select name="sex" class="upt">
                            <option value="s" <c:if test="${userInfo.sex eq 's'}">selected</c:if> >保密</option>
                            <option value="m" <c:if test="${userInfo.sex eq 'm'}">selected</c:if> >男</option>
                            <option value="f" <c:if test="${userInfo.sex eq 'f'}">selected</c:if> >女</option>
                        </select>
                    </p>

                    <p><label class="btn"><a class="btn" @click="nextReg">确认完成</a></label></p>
                </form>
            </div>
        </section>
    </div>
</article>

<jsp:include page="common/footer.jsp"/>

<script>
    new Vue({
        el:"#main",
        data:{
            uploaded:false,
            filename:"",
            imgUrl:"",
            error:"${msg}"
        },
        methods:{
            uploadPhoto(){
                // 获取触发时间的源头 input
                let input = event.target;
                // 获取选中的头像
                let file = input.files[0];
                // 要求上传的头像必须是 png,jpg,或者gif格式
                // console.log(file);
                let type = file.type;
                if (!/^image\/(png|gif|jpg|jpeg)$/.test(type)){
                    $(input).tooltips("头像格式不正确");
                    return;
                }
                this.filename = file.name;
                // 预览头像
                let fileReader = new FileReader();
                // 将头像转成 dataUrl
                fileReader.readAsDataURL(file);

                // 使用onload 监听 图片是否加载完成
                fileReader.onload = () => {
                    // 获取读取的结果
                    this.imgUrl = fileReader.result;

                    // 如果上传的符合要求,则显示上传后的效果
                    this.uploaded = true;
                }
            },
            nextReg(){
                    $("#myform").submit();
            }

        }
    })
</script>
</body>

</html>
